import React, { useEffect } from 'react';
import { Modal, message } from "antd";
import UserSearch from "../components/user/UserSearch";
import UserToolbar from "../components/user/UserToolbar";
import UserList from "../components/user/UserList";
import UserModal from "../components/user/UserModal";
import TablePagination from '../../../components/TablePagination';
import { useGlobalShare } from '../../../models/globalShare';
import useUserState from '../models/userState';

const UserPage = (props) => {

    const { themeColor } = useGlobalShare();
    const {
        loading, setLoading,
        currentPage, setCurrentPage,
        pageSize, setPageSize,
        total, setTotal,
        userList, setUserList,
        selectedRowKeys, setSelectedRowKeys,
        selectedRows, setSelectedRows,
        searchParams, setSearchParams,
        userModalVisible, setUserModalVisible,
        loadUserPage, addSystemUser, deleteSystemUser,
        userRecord, setUserRecord, updateSystemUser
    } = useUserState();

    useEffect(() => {
        loadUserPage({ current_page: "0", page_size: 10 });
    }, []);

    const userSearchProps = {
        themeColor,
        onSearch: (searchParams) => {
            searchParams.current_page = currentPage + "";
            searchParams.page_size = pageSize;
            setSearchParams(searchParams);
            loadUserPage(searchParams);
        },
        onReset: () => {
            setSearchParams(null);
        },
    };

    const userToolbarProps = {
        themeColor,
        onAdd: () => {
            setUserModalVisible(true);
        },
        onDelete: () => {
            if (selectedRowKeys.length == 0) {
                message.error("请选择要删除的记录！");
                return;
            }
            Modal.confirm({
                title: "删除",
                content: "确定删除选中的记录？",
                onOk() {
                    deleteSystemUser();
                },
                onCancel() {}
            });
        }
    };

    const userListProps = {
        currentPage,
        pageSize,
        userList,
        loading,
        onEdit: (record) => {
            setUserRecord(record);
            setUserModalVisible(true);
        },
        rowSelection: {
            selectedRowKeys,
            selectedRows,
            onChange: (keys, selectedRows) => {
                setSelectedRowKeys(keys);
                setSelectedRows(selectedRows);
            },
        }
    };

    const tablePaginationProps = {
        total,
        currentPage,
        pageSize,
        onPageChange: (currentPage, pageSize) => {
            searchParams.current_page = currentPage + "";
            searchParams.page_size = pageSize;
            setSearchParams(searchParams);
            loadUserPage(searchParams);
        },
        onShowSizeChange: (currentPage, pageSize) => {
            searchParams.current_page = currentPage + "";
            searchParams.page_size = pageSize;
            setSearchParams(searchParams);
            loadUserPage(searchParams);
        },
    };

    const userModalProps = {
        themeColor,
        userModalVisible,
        userRecord,
        loading,
        addOrUpdateUser: (values) => {
            setLoading(true);
            if (!userRecord) {
                addSystemUser(values);
            } else {
                values = { ...userRecord, ...values };
                updateSystemUser(values);
            }
        },
        closeUserModal: () => {
            setUserModalVisible(false);
            setUserRecord({});
        }
    };

    return (
        <div style={{ width: "calc(100% - 43px)", height: "calc(100% - 40px)", background: "#ffffff", padding: 20 }}>
            <UserSearch {...userSearchProps} />
            <UserToolbar {...userToolbarProps} />
            <UserList {...userListProps} />
            <TablePagination {...tablePaginationProps} />

            <UserModal {...userModalProps} />
        </div>
    );
}

export default UserPage;
